<!--  -->
<template>
  <div class="tab-bar-item" @click="itemClick">
      <slot name="item-icon" :isActive="isActive"></slot>
      <slot name="item-text"></slot>
  </div>
</template>

<script>
/* eslint-disable */
export default {
    name:'TabBarItem',
  data () {
    return {
    }
  },
  props:{
    link:{
      type:String,
      default:'/home'
    }
  },
  computed:{
    isActive(){
      return this.$route.path == this.link
    }
  },
  methods:{
      itemClick(){
          this.$router.push(this.link)
          // console.log(this.$route.path);
          // console.log(111);
          
      }
  }
}
</script>

<style lang='stylus' scoped>
        .tab-bar-item {
  text-align: center;
  flex: 1;
  height: 49px;
}
.tab-bar-item img {
  height: 24px;
  width: 24px;
  
}
</style>
